在这篇文章中，我们将了解Zustand的源代码中如何使用Object.assign()。

上面的代码片段来自vanilla.ts，当你设置一个状态时，Object.assign用于更新你的状态对象。

我们先来了解一下Object.assign的基础知识：

对象.分配()

Object.assign() 静态方法将所有可枚举自身属性从一个或多个源对象复制到目标对象。它返回修改后的目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

目标对象中的b值被源对象中的b值替换。

真的很简单吧？现在让我们进行一些实验并了解 Zustand 的 setState 如何利用 Object.assign() 方法。

Zustand 源代码中的 Object.assign() ：

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

这是上面代码片段中的嵌套三元运算符。如果replace不为null，则state将被替换，或者如果nextState不是对象，则按原样返回nextState，但我们感兴趣的是Object.assign({}, state, newState).

让我们首先记录并查看更新状态时的状态和下一个状态。我选择的示例来自 Zustand 源代码中的演示示例。我稍微修改了代码，以便我们可以放置一些控制台语句并运行这些实验。

在这个简单的示例中，当计数增加时，它归结为使用 Object.assign 更新状态对象。

下次，您尝试对 JSON 对象执行一些更新，请使用 Object.assign。

关于我们：

在 Think Throo，我们的使命是教授受开源项目启发的最佳实践。

通过在 Next.js/React 中练习高级架构概念，提高您的编码技能，学习最佳实践并构建生产级项目。

我们是开源的 — https://github.com/thinkthroo/thinkthroo（请给我们一颗星！）

希望为您的企业构建定制网络系统？请通过 [email protected] 联系我们

关于作者：

嘿，我是拉姆。我是一名充满热情的软件工程师/OSS Tinkerer。

查看我的网站：https://www.ramunarasinga.com/

参考：

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign